<script setup>
import YuSelect from "./components/YuSelect.vue"
import { ref, onMounted } from 'vue'

const form_data = ref(
  {
    yue1: 'old',
    yue2: 'new',
    juan1: '',
    juan2: '',
    zhang1: 1,
    zhang2: 1,
    limit1: 1,
    limit2: 2,
  }
)

onMounted(() => {

})

function __fil_form__(data) {

}

</script>

<template>
  <form action="/" method="post">
    <div class="row justify-content-center">
      <!-- 左边区域 -->
      <div class="col-md-2">
        <!-- 日期范围 -->
        <div class="col p-1">
          <div class="col h5 m-2">日期范围</div>
          <div class="col-3">
            <input type="radio" class="btn-check" name="options-outlined" id="primary-outlined-current"
              autocomplete="off" checked>
            <label class="btn btn-outline-primary" for="primary-outlined-current">这一周</label>
          </div>
          <div class="col-3">
            <input type="radio" class="btn-check" name="options-outlined" id="primary-outlined-next" autocomplete="off">
            <label class="btn btn-outline-primary" for="primary-outlined-next">这一周</label>
          </div>
        </div>
        <!-- 读经任务一 -->
        <div class="col p-1">
          <div class="col h5 m-2">起始卷章（一）</div>
          <YuSelect v-model:yue="form_data.yue1" v-model:juan="form_data.juan1" v-model:zhang="form_data.zhang1"
            v-model:limit="form_data.limit1" :tag="1"></YuSelect>
        </div>
        <!-- 读经任务二 -->
        <div class="col p-1">
          <div class="col h5 m-2">起始卷章（二）</div>
          <YuSelect v-model:yue="form_data.yue2" v-model:juan="form_data.juan2" v-model:zhang="form_data.zhang2"
            v-model:limit="form_data.limit2" :tag="2"></YuSelect>
        </div>

      </div>
      <!-- 右边区域 -->
      <div class="col-md-8"></div>
    </div>
  </form>


</template>
